// 导航栏
import { defineComponent, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { CreateTimeTOOL } from '@utils/index';
import './style.scss';

const navMap = [
  { path: '/overview', label: '科创概览' },
  { path: '/industryView', label: '产业全景' },
  { path: '/insight', label: '产业洞察' },
];
export default defineComponent({
  name: 'Nav',
  setup: () => {
    const timeRef = ref('');
    const activeNav = ref('overview');
    const route = useRoute();

    onMounted(() => {
      navMap.forEach((n) => {
        if (route.path === n.path) {
          activeNav.value = n.path;
        }
      });
      timeRef.value = CreateTimeTOOL();
      setInterval(() => {
        timeRef.value = CreateTimeTOOL();
      }, 1000);
    });

    watch(
      () => route.path,
      () => {
        navMap.forEach((n) => {
          if (route.path.includes(n.path)) {
            activeNav.value = n.path;
          }
        });
      },
      { deep: true }
    );

    return { time: timeRef, activeNav };
  },
  render() {
    return (
      <div id="Nav">
        <video
          src={require('@assets/titleLight.mp4')}
          style={{ mixBlendMode: 'screen', width: '100%' }}
          autoplay
          muted
          loop={true}
        ></video>
        <aside>
          {/* 左侧三个tab跳转按钮 */}
          {navMap.map((item) => {
            return (
              <router-link to={item.path} class={item.path.includes(this.activeNav) ? 'activeNav' : ''}>
                <p></p>
                {item.label}
              </router-link>
            );
          })}
        </aside>

        <aside>{this.time}</aside>
      </div>
    );
  },
});
